<template>
    <div class="progress-container">
        <div class="progress-done" ref="donePart"></div>
        <p>已售：{{done}}/{{all}}</p>
    </div>
</template>
<script>
export default {
    name: 'progress',
    mounted(){
        const percentage = `${this.done/this.all*100}%`
        this.$nextTick(() => {
            const donePart =  this.$refs.donePart
            donePart.style.width = percentage
            // percetage接近满格时 右侧也变为拱形
            if(percentage > '97%') donePart.style.borderRadius="1rem"
        })
    },
    props: ['all', 'done']
}
</script>
<style lang="less" scoped>
.progress-container{
    width: 5rem;
    border: .02rem solid #fb4a4a;
    height: .4rem;
    line-height: .38rem;
    border-radius: 1rem;
    position: relative;
    text-align: center;
    font-size: .28rem;
    .progress-done{
        background: #fb4a4a;
        height: 100%;
        border-radius: 1rem 0 0 1rem;
        position: absolute;
        top:0;
        left: 0;
    }
    p{
        position: relative;
    }
}
</style>

